<!DOCTYPE html>
<html>
<head>
  <title>TEST</title>

    <style type="text/css">
        input.ng-pristine {
            background-color: white;
        }
        input.ng-dirty {
            background-color: lightyellow;
        }
        input.ng-valid {
            background-color: lightgreen;
        }
        input.ng-invalid {
            background-color: pink;
        }

    </style>


</head>
<body>


<div ng-app="MyApp">
    <div ng-controller="testC">
        <form name="myform" novalidate>

            required: <input type="text" name="test1" ng-model="test1" required><br />
            ng-minlength(3): <input type="text" name="test2" ng-model="test2" ng-minlength="3"><br />
            ng-maxlength(10): <input type="text" name="test3" ng-model="test3" ng-maxlength="10"><br />
            ng-pattern(/[a-f]/): <input type="text" name="test4" ng-model="test4" ng-pattern="/[a-f]/"><br />
            type="number"(2-8): <input type="number" name="test5" max="8" min="2" ng-model="test5"><br />
            type="url": <input type="url" name="test6" ng-model="test6"><br />
            type="email": <input type="email" name="test7" ng-model="test7"><br />
            <hr/>
            <div> 日期：
                <input type="text" ng-model="size" name="size" id="size" dateTest/>
                {{size}}
                <br/>
                <span ng-show="myForm.size.$error.dateTest">不是合法的数！</span>
            </div>
            <hr/>
        </form>
        <div>
            <h2>表单验证结果：</h2>
            myform.$invalid : {{myform.$invalid}}<br />
            myform.$valid : {{myform.$valid}}<br />
            myform.$pristine : {{myform.$pristine}}<br />
            myform.$dirty : {{myform.$dirty}}<br />
            myform.$error : {{myform.$error}}<br />
            <h2>表单项验证结果</h2>
            required:<br />
            myform.test1.$invalid : {{myform.test1.$invalid}}<br />
            myform.test1.$valid : {{myform.test1.$valid}}<br />
            myform.test1.$pristine : {{myform.test1.$pristine}}<br />
            myform.test1.$dirty : {{myform.test1.$dirty}}<br />
            myform.test3.$dirty : {{myform.test3.$dirty}}<br />
            myform.test1.$error : {{myform.test1.$error}}<br />
            myform.testDate.$error : {{myform.testDate.$error}}<br />

        </div>
    </div>

    <div ng-controller="Controller">
        <my-customer info="naomi"></my-customer>
        <hr>
        <my-customer info="igor"></my-customer>
    </div>

</div>


  <script src="angular1.3.min.js" type="text/javascript"></script>
  <script>

      var app = angular.module('MyApp',[]);
      app.controller('testC',function($scope,$filter ){
          $scope.test1='';
          $scope.test2='';
          $scope.test3='';
          $scope.test4='';
          $scope.test5='';
          $scope.test6='';
          $scope.test7='';
          $scope.size = "";
          //$scope.datePat = /^(?:19|20)[0-9][0-9]-(?:(?:0[1-9])|(?:1[0-2]))-(?:(?:[0-2][1-9])|(?:[1-3][0-1])) (?:(?:[0-2][0-3])|(?:[0-1][0-9])):[0-5][0-9]:[0-5][0-9]$/
          //$scope.datePat = /^[0-9]{4}-(((0[13578]|(10|12))-(0[1-9]|[1-2][0-9]|3[0-1]))|(02-(0[1-9]|[1-2][0-9]))|((0[469]|11)-(0[1-9]|[1-2][0-9]|30)))$/;

          //$scope.testDate= $filter('date')('2012-1-1 12:33:44', 'yyyy-MM-dd HH:mm:ss');

      });

      app.directive('myTest', function() {
          return {
              require : 'ngModel',
              restrict: 'ACEM',
              scope:{ test:"=size" },
              link : function(scope, elm, attrs, ctrl) {
                  ctrl.$parsers.unshift(function(viewValue) {
                      console.log(viewValue);
                      if (angular.isDate(viewValue)) {
                          console.log('good date...' + test);
                          ctrl.$setValidity('dateTest', true);
                          return viewValue;
                      } else {
                          ctrl.$setValidity('dateTest', false);
                          return undefined;
                      }
                  });
              }
          };
      });

      app.controller('Controller', ['$scope', function($scope) {
          $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
          $scope.igor = { name: 'Igor', address: '123 Somewhere' };
      }]);

      app.directive('myCustomer', function() {
                  return {
                      restrict: 'E',
                      scope: {
                          customerInfo: '=info'
                      },
                      template: ' Name: {{customerInfo.name}} Address: {{customerInfo.address}} '
                  };
              });

    </script>

</body>
</html>


